import {Component} from '@angular/core';
import {SelectItem} from 'primeng/primeng';
import {CountryService} from '../service/countryservice';
@Component({
    templateUrl: './checkboxdemo.html',
    styles: [`

        h2{
          background: #e0e0e0;
          text-align: center;
          line-height: 4rem;

        }

    `]
})

export class CheckboxDemo {

    selectedCities: string[] = [];
    selectedCategories: string[] = ['Technology', 'Sports'];
    checked: boolean = false;
    //MultiSelectDemo
    cars: SelectItem[];
    selectedCars: string[] = [];

    //ChipsDemo
    values1: string[];
    values2: string[];
    //EditorDemo
    text1: string = '<div>欢迎来到丰信!</div><div>您好！<b>编辑人</b> 熊宝</div><div><br></div>';
    text2: string;
    //InputTextDemo
    text: string;
    disabled: boolean = true;
    toggleDisabled() {
        this.disabled = !this.disabled;
    }
    //InputMaskDemo
    val1: string;
    val2: string;
    val3: string;
    val4: string;
    val5: string;
    val6: string;
    //SpinnerDemo
    val41: number;
    val42: number;
    val43: number;
    val44: number = 100;
    //ToggleButtonDemo
    checked1: boolean = false;
    checked2: boolean = true;
   //InputSwitchDemo
    checked3: boolean = false;
    checked4: boolean = true;
    //RadioButtonDemo
    val51: string;
    val52: string = 'Option 2';
    //TriStateCheckboxDemo
    value: any;
    //RatingDemo
    val61: number;
    val62: number = 5;
    val63: number;
    val64: number = 5;
     msg: string;

      handleRate(event) {
          this.msg = "You have rated " + event.value;
      }

      handleCancel(event) {
          this.msg = "Rating Cancelled";
      }
    //autocomplete
    country: any;
    countries: any[];
    filteredCountriesSingle: any[];
    filteredCountriesMultiple: any[];
    brands: string[] = ['Audi','BMW','Fiat','Ford','Honda','Jaguar','Mercedes','Renault','Volvo','VW'];
    filteredBrands: any[];
    brand: string;

    constructor(private countryService: CountryService) {

      this._initSelect(),
      this._initCity(),
      this._initType()
    }
    filterCountrySingle(event) {
        let query = event.query;
    }

    filterCountryMultiple(event) {
        let query = event.query;
    }

    filterCountry(query, countries: any[]):any[] {

        let filtered : any[] = [];
        for(let i = 0; i < countries.length; i++) {
            let country = countries[i];
            if(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
                filtered.push(country);
            }
        }
        return filtered;
    }
    filterBrands(event) {
        this.filteredBrands = [];
        for(let i = 0; i < this.brands.length; i++) {
            let brand = this.brands[i];
            if(brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
                this.filteredBrands.push(brand);
            }
        }
    }

    handleDropdownClick() {
        this.filteredBrands = [];

        setTimeout(() => {
            this.filteredBrands = this.brands;
        }, 100)
    }

    _initSelect(){
      this.cars = [];
      this.cars.push({label: 'Audi', value: 'Audi'});
      this.cars.push({label: 'BMW', value: 'BMW'});
      this.cars.push({label: 'Fiat', value: 'Fiat'});
      this.cars.push({label: 'Ford', value: 'Ford'});
      this.cars.push({label: 'Honda', value: 'Honda'});
      this.cars.push({label: 'Jaguar', value: 'Jaguar'});
      this.cars.push({label: 'Mercedes', value: 'Mercedes'});
      this.cars.push({label: 'Renault', value: 'Renault'});
      this.cars.push({label: 'VW', value: 'VW'});
      this.cars.push({label: 'Volvo', value: 'Volvo'});
    }

    cities: SelectItem[];
    selectedCity: any;
    selectedCar: string;
    selectedCar2: string = 'BMW';

    _initCity(){
        this.cities = [];
        this.cities.push({label:'New York', value:'New York'});
        this.cities.push({label:'Rome', value:'Rome'});
        this.cities.push({label:'London', value:'London'});
        this.cities.push({label:'Istanbul', value:'Istanbul'});
        this.cities.push({label:'Paris', value:'Paris'});
    }
    //selectbutton
    types: SelectItem[];
    selectedType: string;
    selectedTypes: string[] = ['Apartment','Studio'];

    _initType(){
      this.types = [];
      this.types.push({label: 'Apartment', value: 'Apartment'});
      this.types.push({label: 'House', value: 'House'});
      this.types.push({label: 'Studio', value: 'Studio'});

    }
    clear() {
        this.selectedType = null;
        this.selectedTypes = [];
    }

    //slider
    val71: number;
    val72: number = 50;
    val73: number;
    val74: number;
    val75: number;
    rangeValues: number[] = [20,80];

    //calendar
    date1: Date;
    date2: Date;
    date3: Date;
    date4: Date;
    date5: Date;
    date6: Date;
    date7: Date;
    date8: Date;
    date9: Date;
    minDate: Date;
    maxDate: Date;
    es: any;
    tr: any;
    invalidDates: Array<Date>

    ngOnInit() {
        this.es = {
            firstDayOfWeek: 1,
            dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
            dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
            dayNamesMin: [ "D","L","M","X","J","V","S" ],
            monthNames: [ "enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre" ],
            monthNamesShort: [ "ene","feb","mar","abr","may","jun","jul","ago","sep","oct","nov","dic" ]
        }

        this.tr = {
            firstDayOfWeek : 1
        }

        let today = new Date();
        let month = today.getMonth();
        let year = today.getFullYear();
        let prevMonth = (month === 0) ? 11 : month -1;
        let prevYear = (prevMonth === 11) ? year - 1 : year;
        let nextMonth = (month === 11) ? 0 : month + 1;
        let nextYear = (nextMonth === 0) ? year + 1 : year;
        this.minDate = new Date();
        this.minDate.setMonth(prevMonth);
        this.minDate.setFullYear(prevYear);
        this.maxDate = new Date();
        this.maxDate.setMonth(nextMonth);
        this.maxDate.setFullYear(nextYear);

        let invalidDate = new Date();
        invalidDate.setDate(today.getDate() - 1);
        this.invalidDates = [today,invalidDate];
    }

}
